<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="220" />
        </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="value in carData" :key="value">
            <van-image width="100%" height="100" :src="value.carimg" />
            <div class="products">
                <div>{{ value.carname }}</div>
                <div style="color: red; font-size: 18px; font-weight: 700; margin-top: 5px; margin-bottom: 5px;"><span
                        style="color: red; font-size: 13px;">￥</span>{{value.minprice}}-{{value.maxprice}}<span style="color: red; font-size: 13px;">万元起</span></div>
            </div>
            <div style="width: 100%;">
                <van-button type="warning" size="small" @click="onzx">去咨询</van-button>&nbsp;
                <van-button type="danger" size="small" @click="ongm">立即购买</van-button>
            </div>
           
        </van-grid-item>
    </van-grid>

</template>

<script setup>
import { onMounted, ref } from 'vue'
import { CarGoodsApi } from '../api';
const images = ref([])
const carData = ref([])
onMounted(() => {
    CallGoodsApi()
})

const CallGoodsApi = () => {
    CarGoodsApi.select.call().then(res => {
        images.value = res.map(item => {
            return item.carimg
        })
        carData.value = res
        
    })
}

</script>

<style scoped>
.products {
    width: 100%;
    margin-top: 5px;
   
}
</style>